.api-page {
    max-width: 1200px;
    padding:10px 24px 50px 24px;
    margin: 0 auto;
    .title-label {
      color: #333;
    }
    .title {
      font-size: 26px;
    }
    .title-sub {
      font-size: 16px;
      color: #999;
      margin-bottom: 10px;
    }
  
    .api-url-box {
      width: 100%;
      position: relative;
      height: 38px;
      border-radius: 4px;
      margin-bottom: 10px;
      
      .api-url-method,
      .api-method-select {
        width: 70px;
        text-align: center;
        line-height: 38px;
        color:var(--text-color-light);
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      .api-url-method{
        background-color: var(--bgcolor-light);
        color:var(--text-color);
        &.GET{
            background-color: var(--color-green);
            color:var(--text-color-light);
        }
        &.POST{
            background-color: var(--color-blue);
            color:var(--text-color-light);
        }
        &.PUT {
            background-color: var(--color-orange);
            color:var(--text-color-light);
        }
        &.DELETE {
            background-color: var(--color-red);
            color:var(--text-color-light);
        }
        &.dark{
          color:var(--text-color-light);
        }
      }
      .api-method-select {
        width: 105px;
        background: var(--bgcolor-light);
        height: 36px;
        top: 1px;
        left: 1px;
        &:deep(.ant-select-selector) {
          border: none;
          background: none;
          box-shadow: none;
          
        }
      }
      .api-url-input {
        line-height: 33px;
        input {
          box-sizing: border-box;
          margin: 0;
          font-variant: tabular-nums;
          list-style: none;
          font-feature-settings: "tnum";
          width: 100%;
          height: 38px;
          color:var(--text-color);
          font-size: 16px;
          line-height: 1.5;
          background-color: var(--bgcolor);
          background-image: none;
          border: 1px solid var(--bgcolor-light);
          border-radius: 4px;
          transition: all 0.3s;
          font-family: monospace;
          padding: 0 50px 0 80px;
          &:hover {
            border-color: #40a9ff;
            border-right-width: 1px !important;
          }
          &:focus {
            outline: 0;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }
        }
        &.method-multiple {
          input {
            padding-left: 110px;
          }
        }
      }
      .api-url-copy {
        padding: 8px 15px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color:var(--text-color);
      }
    }
  
    .api-param-table {
      margin-bottom: 10px;
    }
    .text-list-item {
      margin-bottom: 10px;
    }
    
  }

  
  